.films{
  flex: 1;
  overflow-y: auto;
  touch-action: none;
  .films-site{
    width: 100%;
    height: 40px;
    background-image: linear-gradient(90deg,#0af,#0085ff);
    font-weight: 600;
    color: white;
    font-size: 17px;
    display: flex;
    align-items: center;
    padding-left: 12px;
    padding-top: 15px;
    a{
      text-decoration: none;
      color: white;
      span{
      margin: 0 15px 0 5px;
    }
    .icon-ln_jiantouxia{
      font-size: 10px
    }
    }

  }
  .films-search{
    z-index: 999;
    position: sticky;
    top: 0;
    width: 100%;
    height: 55px;
    background-image: linear-gradient(90deg,#0af,#0085ff);
    display: flex;
    justify-content: center;
    align-items: center;
    div{
      width: 347px;
      height: 36px;
      background: white;
      color: #999;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      i{
        font-size: 14px;
        font-weight: 666;
        margin-right: 10px;
      }
    }
  }
  .films-sort{
    display: flex;
    flex-wrap: wrap;
    a{
      width: 20%;
      height: 64px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      margin-top: 10px;
      text-decoration: none;
      img{
        width: 45px;
        height: 45px;
      }
      span{
        font-size: 12px;
        margin-top: 7px;
        color: #666;
      }
    }
  }
  .paging{
    margin-top: 10px;
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    div{
      width: 9px;
      height: 2px;
      background: #000;
      opacity: 0.2;
    }
    .active{
      margin-right: 5px;
      background: #00a6ff
    }
  }
  .films-banner{
    height: 133px;
    padding: 0 10px 10px 10px;
    position: relative;
    .huiyuan{
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-image: linear-gradient(90deg,#ffefc4,#f3dda0);
      border-radius: 5px;
      margin-bottom: 5px;
      .huiyuan-l{
        display: flex;
        align-items: center;
        color: #644f1b;
        img{
          width: 17px;
          height: 17px;
          margin-left: 15px;
        }
        h3{
          margin: 0 8px;
          font-size: 15px;
          font-weight: 666;
        }
        span{
          font-size: 10px;
        }
      }
      .huiyuan-r{
        display: flex;
        align-items: center;
        font-size: 10px;
        color: #644f1b;
        i{
          font-size: 12px;
          margin-right: 5px;
        }
      }
    }
    .zz{
      width: 55px;
      height: 20px;
      border-radius: 10px;
      position: absolute;
      background: rgba(0,0,0,.5);
      opacity: 0.8;
      display: flex;
      justify-content: center;
      align-items: center;
      right: 12px;
      bottom: 2px;
      a{
        color: white;
        font-size: 10px;
        text-decoration: none;
      }
    }
  }
  .tuijian{
    margin-top: 8px;
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    span{
      color:#999;
      font-weight: 666;
    }
  }
  .screen{
    height: 40px;
    display: flex;
    li{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666;
      font-size: 16px;
      .icon-ln_jiantouxia{
        font-size: 5px;
        margin-left: 5px;
      }
      &.screen-active{
        font-weight: 666;
        color: black;
      }
    }
  }
  .films-list{
    li{
      height: 176px;
      padding: 15px 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .list-t{
        width: 100%;
        height: 65px;
        display: flex;
        justify-content: space-between;
        img{
          width: 65px;
          height: 65px;
        }
        .list-t-r{
          flex: 1;
          padding-left: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .list-t-name{
            display: flex;
            justify-content: space-between;
            align-items: center;
            div{
              display: flex;
              span{
                padding: 0 3px;
                height: 16.4px;
                background-image: linear-gradient(-139deg,#fff100,#ffe339);
                border-radius: 3px;
                font-size: 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 666;
                color: #666;
              }
              h3{
                margin-left: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
            h3{
              margin-left: 5px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 16px;
              font-weight: 666;
            }
          }
          .list-grade{
            color: #666;
            img{
              height: 10px;
            }
            span{
              font-size: 12px;
              &.list-nub{
                margin: 0 5px;
              }
            }
          }
          .list-evaluation{
            display: flex;
            justify-content: space-between;
            align-items: center;
            span{
              font-size: 12px;
              color: #666;
            }
          }
        }
      }
      .list-b{
        width: 100%;
        height: 71px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 75px;
        .list-b1{
          font-size: 12px;
          color: #666;
          display: flex;
          align-items: center;
          span{
            padding: 0 3px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #999;
            border-radius: 3px;
            margin-right: 3px;
          }
          img{
            width: 10px;
            height: 10px;
            margin-right: 6px;
          }
          p{
            color: #e8470b;
          }
        }
        .list-b2{
          height: 38px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          div{
            display: flex;
            span{
              width: 14px;
              height: 14px;
              border-radius: 3px;
              font-size: 10px;
              color: white;
              background: rgb(241, 136, 79);
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 5px;
            }
            p{
              height: 14px;
              display: flex;
              align-items: center;
              font-size: 10px;
              color: #666;
            }
          }
        }
      }
    }
  }
}
